<?php
     //$extensions = str_replace([',','，'],"|",$extensions);
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源上传</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/plugs/webuploader/webuploader.css">
    <script src="/static/plugs/cpjs/src/lib/jquery/jquery_v3.5.1.min.js"></script>
    <script src="/static/plugs/webuploader/webuploader.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script type="text/javascript">
        var fileList = [];
        var url = "{:url('admin/webupload/webuploader',['multi'=>$multi,'filetype'=>$filetype,'app'=>$app,'tab'=>$tab])}";
        var multiple = parseInt('{$multi}');
        var exts = '{$extensions}';
        var max_files = parseInt('{$max_files}');
        var upload_max_filesize = parseInt('{$upload_max_filesize}');
        var file_type  = '{$filetype}'
        var chunk_size = parseInt('{$chunk_size}' * 1024)
    </script>
</head>
<body>
<div class="up-container">
    <div class="layui-tab layui-tab-brief" lay-filter="upTabs">
        <ul class="layui-tab-title">
            <li class="layui-this"  lay-id="1">上传文件</li>
            <li  lay-id="2">网络文件</li>
            {notempty name='has_cloud_storage'}
            <li  lay-id="3">上传到云存储</li>
            {/notempty}
        </ul>
        <div class="layui-tab-content" style="padding: 10px;">
            <div class="layui-tab-item layui-show">
                <div style="display: flex;justify-content: left">
                    <div  class=" uploadFileBtn" id="uploadFileBtn">
                        <i class="layui-icon">&#xe67c;</i>上传文件
                    </div>
                    <button type="button" id="ctlBtn" class="btn btn-default layui-btn">开始上传</button>
                </div>
            </div>
            <div class="layui-tab-item">
                <div>请输入网路地址</div>
                <input type="text" class="layui-input" name="info[filename]" placeholder="http://">
            </div>
            <div class="layui-tab-item" id="cloud">
                <button type="button" class="layui-btn uploadFileBtn">
                    <i class="layui-icon">&#xe67c;</i>上传文件
                </button>
            </div>
        </div>
    </div>
    <table class="layui-table upTable"></table>
</div>
<script type="text/javascript">
    layui.use(['layer','element'],function () {
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var layId = 0;
        function uploadFile() {
            var uploader = WebUploader.create({
                swf:  '/static/plugs/webuploader/Uploader.swf',
                server: url,
                chunked: false,
                timeout:0,
                pick: {
                    id:"#uploadFileBtn",
                    multiple:multiple,
                    label:"点击选择文件"
                },
                accept: {
                    title: file_type,
                    extensions: exts,
                    mimeTypes:file_type
                },
                resize: false,
                chunkSize:chunk_size,
                threads:max_files,
                fileSingleSizeLimit:upload_max_filesize,
            });
            //文件加入队列
            uploader.on( 'fileQueued', function( file ) {
                $('.upTable').append( tr = '<tr class="tr_'+file.id+'">'+
                    '<td>'+
                    '<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">' +
                    //'<img src="'+result+'" alt="" width="110" height="110">' +
                    '</div>'+
                    '<div class="layui-col-md9 layui-col-sm9 layui-col-xs9" >'+
                    '<div class="upLeftMsg" style="margin-top: 40px;">'+
                    '<span class="upTips">等待上传</span>'+
                    //进度条开始
                    '<div class="progress_'+file.id+'" ></div>'+
                    //进度条结束
                    '<div class="filename" style="margin-top: 10px">'+file.name+'</div>'+
                    '</div>'+
                    '</div>'+
                    '<input type="hidden" class="layui-input" value="'+file.id+'" name="id">'+
                    '</td>'+

                    '<td width="120">' +
                    '<a class="layui-btn layui-btn-danger layui-btn-xs deleteFileBtn">删除</a>'+
                    '<a class="layui-btn  layui-btn-xs restUploadBrn"  style="display: none;">重新上传</a>'+
                    '</td>'+
                    '</tr>' );
                $(".deleteFileBtn").click(function () {
                    $(this).parents("tr").remove()
                    uploader.removeFile( file );
                })
                $(".restUploadBrn").click(function () {
                    uploader.retry(file);
                })
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '.tr_'+file.id ).find(".progress_"+file.id), $percent = $li.find('.progress .progress-bar');
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%;height: 10px;border-radius: 5px;background-color: green">' +
                        '</div>' +
                        '<div class="jindu"></div>'+
                        '</div>').appendTo( $li ).find('.progress-bar');
                }
                var ps  = parseInt(percentage* 100);
                if(ps!='100')
                {
                    $( '.tr_'+file.id ).find('.upTips').text('文件读取中');
                }else{
                    $( '.tr_'+file.id ).find('.upTips').text('文件正在上传，请耐心等待');
                }
                $percent.css( 'width', percentage * 100 + '%' );

                $( '.tr_'+file.id ).find(".jindu").text("进度"+  ps + '%');
            });
            //文件成功处理
            uploader.on( 'uploadSuccess', function( file,response ) {
                $( '.tr_'+file.id ).find('.restUploadBrn').hide();
                if(response.code===1){
                    $( '.tr_'+file.id ).find('.upTips').text('已上传');
                    $( '.tr_'+file.id ).find(".restUploadBrn").hide();
                    fileList.push(response.data)
                }else{
                    $( '.tr_'+file.id ).find('.upTips').text('上传失败');
                    $( '.tr_'+file.id ).find(".restUploadBrn").show();
                }
                localStorage.setItem("upload",JSON.stringify(fileList));
            });
            //文件失败处理
            uploader.on( 'uploadError', function( file,response ) {
                $( '.tr_'+file.id ).find('.upTips').text('上传失败，请点击上传按钮重新上传');
                $( '.tr_'+file.id ).find('.restUploadBrn').show();
            });
            //完成后触发
            uploader.on( 'uploadComplete', function( file ) {
                $( '.tr_'+file.id ).find('.progress').fadeOut();
            });
            //文件验证不不通过
            uploader.on( 'error', function( file ) {
                layer.msg("选择文件不符合，请重新选择")
            });
            //开始上传
            $("#ctlBtn").on( 'click', function() {
                if ($(this).hasClass('disabled')) {
                    return false;
                }
                uploader.upload();
            });
        }
        if(layId===0){
            uploadFile()
        }
        element.on('tab(upTabs)', function(){

            $(".upTable").html('');

            localStorage.removeItem("upload");

            layId = this.getAttribute('lay-id');

            if(layId === '2'){
                $("input[name='info[filename]']").change(function () {
                    var file =  $(this).val();
                    fileList = [
                        {
                            preview_url:file,
                            url : file,
                            filepath: file
                        }
                    ];
                    localStorage.setItem("upload",JSON.stringify(fileList));
                })
            }
            if(layId === '3'){
                url = url.replace('local','cloud');
                url = url.replace('url','cloud');
                $("#cloud").html('<iframe src="'+url+'" style="width:100%;height: 300px;border: none;"></iframe>');
            }
            if(layId === '1'){
                // uploadFile()
            }
            return false
        });
    })
</script>
</body>
</html>